<template>
    <div class="dynamic2">
        <div
                class="dynamic-cell with-grey-bottom-border"
                v-for="(item,index) in dynamicList" :key="index"
        >
            <div class="header">
                <div class="username">呆萌小鬼</div>
                <div class="pub-time">5小时前</div>
                <img @click="$router.push('/user-page')" src="@/assets/用户主页1-assets/tx.png" alt=""/>
            </div>
            <div @click="$router.push('/dynamics-detail')" v-if="item.type === 1" class="content">
                <div class="text">
                    麦尔鼓手节8小接Solo简介，麦尔鼓手节8小Solo简介，麦尔鼓手节8小接Solo简介。
                </div>
                <div
                        :class="{ img: true, 'short-container': item.imgLength === 4,'single':item.imgLength ===1 }"
                >
                    <img
                            class="content-img"
                            v-for="(item,index) in item.imgList" :key="index"
                            src="@/assets/用户主页2-assets/big2.png"
                            alt=""
                    />
                </div>
            </div>
            <div v-else class="video"></div>
            <div v-if="item.isRepost" class="repost">
                <div class="content">
                    <div class="text">
                        @昵称1：别让我走远别让我走远别让我走远别让我走远别让我走远
                    </div>
                    <div class="img">
                        <img
                                class="content-img"
                                v-for="(item,index) in ['', '']" :key="index"
                                src="@/assets/用户主页1-assets/p1.png"
                                alt=""
                        />
                    </div>
                </div>
            </div>
            <div class="location" v-if="item.location">
                <img src="@/assets/动态详情1-assets/地址 (1).png" alt=""/>
                {{ item.location }}
            </div>
            <div class="footer">
                <div class="left">
                    <button class="btn">
                        <img
                                style="height:0.5rem;"
                                src="@/assets/用户主页1-assets/eye.png"
                                alt=""
                        />
                        {{ item.watch ? item.watch : "浏览" }}
                    </button>
                    <button class="btn">
                        <img src="@/assets/用户主页1-assets/zan.png" alt=""/>
                        {{ item.zan ? item.zan : "点赞" }}
                    </button>
                    <button class="btn">
                        <img src="@/assets/用户主页1-assets/comment.png" alt=""/>
                        {{ item.comment ? item.comment : "评论" }}
                    </button>
                </div>
                <div class="right">
                    <button class="more-btn"></button>
                </div>
            </div>
            <div class="comment" v-if="item.commentList">
                <div class="triangle"></div>
                <div class="comment-cell with-grey-bottom-border">
          <span class="nickname">昵称1</span
          >：麦尔鼓手节8小接Solo简介麦尔鼓手节8小接Solo简介麦尔鼓手节8小接Solo简介麦尔鼓手节8小接Solo简介
                </div>
                <div class="comment-cell with-grey-bottom-border">
                    <span class="nickname">昵称1</span>回复<span class="nickname"
                >昵称2</span
                >：麦尔鼓手节8小接Solo简简
                </div>
                <div class="comment-cell">
                    <span class="nickname">昵称1</span>：麦尔鼓手节8小接Solo简介
                </div>
                <div class="show-more">
                    展开全部<img src="@/assets/搜索结果-assets/x.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dynamicList: [
                    {
                        type: 1, //1图文 2视频
                        isRepost: false,
                        imgList: ["", "", ""],
                        location: "上海普陀区中潭路",
                        watch: 93,
                        zan: 203,
                        comment: 903,
                        commentList: [""]
                    },
                    {
                        type: 1,
                        isRepost: true,
                        watch: 0,
                        zan: 0,
                        comment: 0
                    },
                    {
                        type: 2,
                        isRepost: false,
                        watch: 93,
                        zan: 203,
                        comment: 903
                    },
                    {
                        type: 1,
                        isRepost: false,
                        imgList: ["", "", "", ""],
                        watch: 93,
                        zan: 203,
                        comment: 903,
                        imgLength: 4
                    },
                    {
                        type: 1,
                        isRepost: false,
                        imgList: ["", "", "", "", "", "", "", ""],
                        watch: 93,
                        zan: 203,
                        comment: 903
                    }
                    ,
                    {
                        type: 1,
                        isRepost: false,
                        imgList: [""],
                        watch: 93,
                        zan: 203,
                        comment: 903,
                        imgLength: 1
                    }
                ]
            };
        }
    };
</script>

<style lang="less" scoped>
    .dynamic2 {
        width: 100%;
        background-color: #fff;
        overflow: hidden;
        padding-bottom: 1rem;

        .dynamic-cell {
            padding: 0 3.2%;
            margin: 0.2rem 0 0.5rem 12.07%;
            padding-bottom: 0.7rem;

            .header {
                position: relative;
                height: 1.36rem;
                line-height: 1.36rem;
                width: 100%;
                display: flex;
                justify-content: space-between;

                .username {
                    font-weight: bold;
                    color: rgba(68, 68, 68, 1);
                    font-size: 0.56rem;
                }

                .pub-time {
                    color: rgba(153, 153, 153, 1);
                    font-size: 0.44rem;
                }

                img {
                    position: absolute;
                    height: 1.36rem;
                    width: 1.36rem;
                    left: -1.68rem;
                }
            }

            .content {
                .text {
                    color: rgba(68, 68, 68, 1);
                    font-size: 0.64rem;
                    line-height: 0.96rem;
                }

                .img {
                    display: flex;
                    margin-top: 0.64rem;
                    flex-wrap: wrap;

                    .content-img {
                        height: 3.2rem;
                        width: 3.2rem;
                        margin: 0.12rem;
                    }
                }
            }

            .video {
                min-width: 5.6rem;
                max-width: 100%;
                height: 6rem;
                background-color: #dfdfdf;
            }

            .repost {
                padding: 0.5rem;
                background: rgba(245, 245, 245, 1);

                .content {
                    .text {
                        font-size: 0.56rem;
                    }
                }
            }

            .location {
                color: rgba(51, 147, 255, 1);
                font-size: 0.56rem;
                height: 1rem;
                line-height: 1rem;

                img {
                    height: 0.64rem;
                    vertical-align: middle;
                }
            }

            .footer {
                display: flex;
                justify-content: space-between;
                margin-top: 0.5rem;

                .left {
                    .btn {
                        vertical-align: top;
                        margin-right: 1.5rem;
                        color: #888888;
                        border: none;
                        background: none;
                        font-size: 0.48rem;
                        padding: 0;

                        img {
                            vertical-align: middle;
                            height: 0.6rem;
                        }
                    }
                }

                .right {
                    .more-btn {
                        vertical-align: top;
                        background: none;
                        border: none;
                        padding: 0;
                        width: 0.08rem;
                        height: 0.56rem;
                        background-image: url("../../../assets/用户主页1-assets/more.png");
                        background-size: 100% 100%;
                    }
                }
            }

            .comment {
                position: relative;
                background: rgba(245, 245, 245, 1);
                border-radius: 0.1rem;
                padding: 0.24rem 0.72rem;
                margin-top: 0.6rem;

                .triangle {
                    position: absolute;
                    left: 0.74rem;
                    top: -0.72rem;
                    height: 0;
                    box-sizing: content-box;
                    border: 0.36rem solid rgba(245, 245, 245, 0);
                    border-bottom: 0.36rem solid rgba(245, 245, 245, 1);
                    width: 0;
                }

                .comment-cell {
                    font-size: 0.56rem;
                    color: #666666;
                    padding: 0.36rem 0;

                    .nickname {
                        color: #3875d1;
                    }
                }

                .show-more {
                    font-size: 0.48rem;
                    color: #999999;
                    text-align: center;
                    padding: 0.4rem 0;

                    img {
                        width: 0.36rem;
                        margin-left: 0.24rem;
                    }
                }
            }

            .short-container {
                width: 7rem;
            }

            .single {
                .content-img {
                    max-width: 100% !important;
                    min-width: 5.8rem;
                    height: auto !important;
                }
            }
        }
    }
</style>
